<template>
  <div class="zdp-tabs">
    <!-- 选项卡头部 -->
    <div class="zdp-tabs__header">
      <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['zdp-tabs__tab', { 'zdp-tabs__tab--active': index === activeIndex }]"
          @click="handleTabClick(index)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 选项卡内容 -->
    <div class="zdp-tabs__content">
      <slot :name="`tab-${activeIndex}`"></slot>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue';

// 定义 Props
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every((tab) => tab.label && tab.value);
    },
  },
  active: {
    type: Number,
    default: 0,
  },
});

// 定义 Emits
const emit = defineEmits(['change']);

// 当前选中的选项卡索引
const activeIndex = ref(props.active);

// 监听 active 的变化
watch(
    () => props.active,
    (newIndex) => {
      activeIndex.value = newIndex;
    }
);

// 处理选项卡点击
const handleTabClick = (index) => {
  if (index !== activeIndex.value) {
    activeIndex.value = index;
    emit('change', index);
  }
};
</script>

<style scoped>
.zdp-tabs {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.zdp-tabs__header {
  display: flex;
  background-color: #f9fafb;
  border-bottom: 1px solid #e4e7ed;
}

.zdp-tabs__tab {
  flex: 1;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.zdp-tabs__tab:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.zdp-tabs__tab--active {
  color: #409eff;
  background-color: #fff;
  border-bottom: 2px solid #409eff;
}

.zdp-tabs__content {
  padding: 20px;
  background-color: #fff;
  color: #606266;
  font-size: 14px;
}
</style>